<style>
    .image-row .img-t{
        width: 164px;
        height: 220px;
        margin: 15px;
        cursor: pointer;
        border: #EEEEEE 1px solid;
        border-radius: 3px;
    }

    .select-row{
        background-color: #E1F0FB;
    }
    .select-row .img-block{
        margin-top:0px;
    }

    .image-row .img-t:hover{
        background-color: #E1F0FB;
    }
    .image-row .img-block{
        margin-top:34px;
        width: 162px;
        height: 150px;
        text-align: center;
        overflow: hidden;
    }
    .image-row .img-font{
        overflow: hidden;
        text-align: center;
        width: 140px;
        padding:0 10px;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: normal;
    }

    .select-icon{
        float: right;
        margin: 5px 5px;
        background-color: #5FB878;
        color: #f7f7f7;
        text-align: center;
        width: 22px;
        height: 24px;
    }
    .select-row .select-icon{
        display: block;
    }
    .select-icon{
        display: none;
    }

    .other-icon{
        position: relative;
        text-align: center;
        top: 60px;
        position: relative;
        font-size: 80px;
        width: 150px;
        height: 150px;
        left: 40px;
    }
</style>

<div class="">
    <input type="hidden" name="name1" id="mediaid123" autocomplete="off"	class="layui-input">

    <div class="row image-row ">
        <#if items?? && items?size gt 0>
            <#list items as item>
            <div class="img-t " data-media-id="${item.mediaId}" id="img_${item.mediaId}">
                <div class="select-icon">
                    <i class="layui-icon layui-icon-ok" style="position: relative;"></i>
                </div>

                <div class="img-block">
                    <div id="image_${item.mediaId}">
                        <#if type !='video' && type != 'voice'>
                        <img style="width:70%;height:100%;cursor: pointer;"  src='/admin/weixin/media.html?url=<#if type =="image">${item.url?url}</#if><#if type =="news" && item.content.articles?? && item.content.articles?size gt 0>${item.content.articles[0].thumbUrl}</#if>' />
                    </#if>
                    </div>
                <#if type =='video' || type == 'voice'>
                    <div style="float:left;">
                            <i class="layui-icon  <#if type =='voice'>layui-icon-voice<#else> layui-icon-video</#if> other-icon"></i>
                    </div>
                </#if>
                </div>
                <div class="">
                    <#if type !='news' ><div title="${item.name}" class="img-font">${item.name}</div></#if>
                    <#if type =='news' && item.content.articles?? && item.content.articles?size gt 0>
    <div class="img-font" ><a href="${item.content.articles[0].url}" target="_blank" title=" ${item.content.articles[0].title}"> ${item.content.articles[0].title}</a></div>
                    </#if>
                </div>
            </div>
            </#list>
        </#if>
    </div>
    <div class="row" >
        <div class="col-lg-12" id="page" style="text-align:center;"></div>
    </div>
</div>

<script>
    layui.use(['form','layer'], function(){
        var form = layui.form;

        $(".img-t").click(function () {
            $(".img-t").removeClass("select-row");
            $(this).addClass("select-row");
            $("#mediaid123").val($(this).attr("data-media-id"));
        })

    });
    layui.use(['laypage', 'layer'], function(){
        var laypage = layui.laypage
            ,layer = layui.layer;
        laypage.render({
            elem: 'page'
            ,pages: ${totalPages} //总页数
            ,curr:${curr+1!0}
            ,groups: 5 //连续显示分页数
            ,jump:function(data , first){
            if(!first){
                $.ajax({
                    type: "post",
                    url: "/admin/weixin/menu/getMediaAjax.html",
                    data: {id:'${snsAccount.id!""}',type:'${type}',p:data.curr },
                    dataType: "html",
                    success: function(data){
                        $("#data-div").html(data);
                    }
                });
            }
        }
    });
    });
</script>